<template>
	<div>
		<Model v-bind:taskId="taskId" v-bind:userId="userId"></Model>
		<div class="container">
        <!-- 审批信息 -->
        <div class="info-preview">
            <div class="h5-list-address content">
                <div class="h5-list-flex">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-address.png"></div>
                    	房产地址：
                </div>
                <div class="white h5-address">{{estateRecord.combinedName}}</div>
            </div>
            <div class="h5-list-flex content h5-height-default h5-user-info border-top-bottom-green">
                <div class="item left-item border-right-green">
                    <div class="font12"><img src="../../assets/images/title-user.png">发起人</div>
                    <div class="white">{{signedRecord.createNameStr}}</div>
                </div>
                <div class="item center-item border-right-green">
                    <div class="font12"><img src="../../assets/images/title-user.png">经纪人</div>
                    <div class="white">{{signedDiscountInfo.userName}}</div>
                </div>
                <div class="item right-item">
                    <div class="font12"><img src="../../assets/images/title-user.png">客户姓名</div>
                    <div class="white">{{customerRecord.customerName}}</div>
                </div>
            </div>
            <div class="content">
                <div class="h5-list-flex h5-apply-time">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-time.png"></div>
                    <div>申请时间：{{signedRecord.createTime}}</div>
                </div>
            </div>
        </div>
        <!-- 房产信息 -->
        <div class="h5-list border-top-bottom-default">
            <div class="h5-list-box">
                <div class="h5-list-flex h5-list-title border-bottom-primary green">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-house.png"></div>
                   	 房产信息
                </div>
                <div class="content">
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产：</div>
                        <div class="h5-item-content">
                       			{{estateRecord.combinedName}}
                        </div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">房源状态：</div>
                        <div class="h5-item-content">{{estateRecord.roomStatusName}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">成交类型：</div>
                        <div class="h5-item-content">{{signedRecord.dealCategoryName}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">签约日期：</div>
                        <div class="h5-item-content">{{signedRecord.didTime}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">建筑面积：</div>
                        <div class="h5-item-content">{{estateRecord.buildingArea}}m2</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">套内面积：</div>
                        <div class="h5-item-content">{{estateRecord.innerArea}}m2</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">分摊面积：</div>
                        <div class="h5-item-content">{{estateRecord.sharingArea}}m2</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">计价面积：</div>
                        <div class="h5-item-content">{{estateRecord.calculateArea}}m2</div>
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- After -->
        <div class="h5-list after">
            <div class="h5-list-box border-bottom-primary">
                <div class="h5-list-flex h5-list-title border-bottom-primary h5-title-height-md orange">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-sign-info.png"></div>
                   		签约信息
                </div>
                <div class="content">
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">合同编号：</div>
                        <div class="h5-item-content">{{signedRecord.signCode}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">合同类型：</div>
                        <div class="h5-item-content">{{signedRecord.contactTypeName}}</div>
                    </div>
                    
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">折前单价：</div>
                        <div class="h5-item-content">{{signedRecord.conversionPrice}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default">
                        <div class="h5-item-label">折前总价：</div>
                        <div class="h5-item-content">{{signedRecord.lumpsumPrice}}元</div>
                    </div>
                </div>
            </div>
            <div class="h5-list-box border-bottom-primary">
                <div class="h5-list-flex h5-list-title border-bottom-primary h5-title-height-md orange">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-discount-info.png"></div>
                    折扣信息
                </div>
                <div class="content">
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">折扣/签约单价：</div>
                        <div class="h5-item-content">{{signedRecord.signPrice}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">折扣/签约总价：</div>
                        <div class="h5-item-content">{{signedRecord.signAmount}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">折扣金额：</div>
                        <div class="h5-item-content">{{signedRecord.discountAmount}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">折扣比例（%）：</div>
                        <div class="h5-item-content">{{signedRecord.discountRate}}%</div>
                    </div>
                    <div class="h5-list-flex h5-height-default">
                        <div class="h5-item-label">已收认购金：</div>
                        <div class="h5-item-content">{{signedRecord.subscribeAmount}}</div>
                    </div>
                </div>
            </div>
            <div class="h5-list-box">
                <div class="h5-list-flex h5-list-title border-bottom-primary h5-title-height-md orange">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-discount-declare.png"></div>
                    		折扣说明
                </div>
                <div class="content">
                    <div class="h5-item-txt">{{signedRecord.discountNote}}</div>
                </div>
            </div>
        </div>
        <!-- 支付方式 -->
        <div class="h5-list border-top-bottom-default">
            <div class="h5-list-box">
                <div class="h5-list-flex h5-list-title border-bottom-primary green">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-pay.png"></div>
                    支付方式
                </div>
                <div class="content">
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">支付方式：</div>
                        <div class="h5-item-content">{{signedRecord.paymentMethodName}}</div>
                    </div>
                  
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">应收金额：</div>
                        <div class="h5-item-content">{{paymentMethod.totalReceivablesAmount}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">已收金额：</div>
                        <div class="h5-item-content">{{paymentMethod.receivedAmount}}元</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">未收金额：</div>
                        <div class="h5-item-content">{{paymentMethod.needReceivedAmount}}元</div>
                    </div>
                  
                </div>
            </div>
        </div>
        <!-- 客户信息 -->
        <div class="h5-list border-top-bottom-default">
            <div class="h5-list-box">
                <div class="h5-list-flex h5-list-title border-bottom-primary green">
                    <div class="h5-list-title-img"><img src="../../assets/images/title-user-info.png"></div>
                  	  客户信息
                </div>
                <div class="content">
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">姓名：</div>
                        <div class="h5-item-content">{{customerRecord.customerName}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">客户来源：</div>
                        <div class="h5-item-content">{{customerRecord.customerOriginName}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">证件类型：</div>
                        <div class="h5-item-content">{{customerRecord.peDocumentTypeName}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">证件号码：</div>
                        <div class="h5-item-content">{{customerRecord.peDocumentNumber}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">手机号码：</div>
                        <div class="h5-item-content">{{customerRecord.customerPhone}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default border-bottom-primary">
                        <div class="h5-item-label">邮寄地址：</div>
                        <div class="h5-item-content">{{customerRecord.peContactAddress}}</div>
                    </div>
                    <div class="h5-list-flex h5-height-default">
                        <div class="h5-item-label">邮编：</div>
                        <div class="h5-item-content">{{customerRecord.pePostcode}}</div>
                    </div>
                </div>
            </div>
        </div>
          <!--设置单页面标题-->
	        <Document v-bind:processId="processId"></Document>
        <!-- 共同购房者 -->
        <FamilyModel v-bind:buyId="buyId" v-bind:memberType="memberType"></FamilyModel>
        <!-- 附件 -->
        <ActivityFile v-bind:objectId="objectId" v-bind:imageType="imageType"></ActivityFile>
        <!-- 审批进度 h-->
        <ActivityHistory v-bind:processId="processId" v-bind:userId="userId"></ActivityHistory>
    </div>
    <div class="md-overlay"></div>
    <div class="h5-btn-list">
        <a class="h5-btn h5-btn-primary md-trigger" data-modal="modal-1" style="width: 100%;">审核</a>
    </div>
	</div>
</template>

<script type="text/javascript">
	import FamilyModel from '../common/familyModel.vue'
	import ActivityFile from '../common/activityFile.vue'
	import ActivityHistory  from '../common/activityHistory.vue'
	import Model from '../common/modal.vue'
	import Document from '../common/document.vue'
	export default{
		data(){
			return{
				signedDiscountInfo:{},
				customerRecord:{},
				signedRecord:{},
				estateRecord:{},
				paymentMethod:{},
				memberType:'4',
				buyId:'',
				objectId:'',
				imageType:'3',
				processId:'',
				userId:''
				
			}
		},
		mounted:function(){
			this.initSignedDiscount();
		},components:{
			FamilyModel,
			ActivityFile,
			ActivityHistory,
			Model,
			Document
		},
		methods:{
			initSignedDiscount:function(){
				var _self = this;
				var busKey = _self.$route.params.busKey;
				_self.buyId = busKey;
				_self.objectId = busKey;
				_self.processId = _self.$route.params.processId;
				_self.userId = _self.$route.params.userId;
				_self.taskId = _self.$route.params.taskId;
				var url = _self.utilHelper.apiUrl+'/wordFlowData/signedDiscount';
				var params = {
					id:busKey
				};
				_self.$http.post(url,params).then((response)=>{
					var body = response.body;
					if(body.res=="1"){
						_self.signedDiscountInfo=body.obj;
						_self.customerRecord = body.obj.customerRecord;
						_self.signedRecord = body.obj.signedRecord;
						_self.estateRecord = body.obj.estateRecord;
						var paymentDetails=JSON.parse(_self.signedRecord.extraInformation);
						var paymentList = paymentDetails.paymentDetails;
						var totalReceivablesAmount = 0; //应收金额
						var receivedAmount = 0; //已收金额
						var needReceivedAmount = 0; //未收金额
						for(var i=0;i<paymentList.length;i++){
							var objs = paymentList[i];
							console.log(objs);
							totalReceivablesAmount+=parseInt(objs.totalReceivablesAmount);
							receivedAmount += parseInt(objs.receivedAmount);
							needReceivedAmount += parseInt(objs.needReceivedAmount);
						}
						_self.paymentMethod.totalReceivablesAmount=totalReceivablesAmount;
						_self.paymentMethod.receivedAmount = receivedAmount;
						_self.paymentMethod.needReceivedAmount = needReceivedAmount;
					}else{
						layer.alert("接口异常,请联系管理员!");
					}
				});
			}
		}
		
		
	}
</script>
